<template>
  <div class="new_auction_recharge">
    <c-title :hide="false" text="充值"></c-title>
    <div class="account_management_top"></div>
    <div class="detail">
      <div class="account_txt">我的账户：{{ $i18n.t("money") }}{{ money }}</div>
      <div class="numInpBox">
        <span class="small">{{ $i18n.t("money") }}</span>
        <van-field v-model="priceVal" type="number" placeholder="请输入金额" :border="false" />
      </div>
      <div class="tips">1.00元等于资金1.00元</div>
    </div>
    <div class="rechargeList">
      <div class="txt">充值方式</div>
      <div class="lis">
        <div class="rachageLis" v-for="(item, ind) in paymentList" :key="ind" @click="tapPay(item)">
          <i class="iconfont" :class="[btnclass(item.value)]"></i>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { yzPay } from "../../utils/yz_pay"; //引入支付方法
export default {
  mixins: [yzPay],
  data() {
    return {
      priceVal: "",
      paymentList: [],
      money: "0.00",
      isClick: true
    };
  },
  activated() {
    this.getData();
    this.get_paymentList();
  },
  methods: {
    // 预下单
    async tapPay(item) {
      if (!this.isClick) {
        return;
      }
      this.isClick = false;
      let json = {
        new_auction_price: this.priceVal
      };
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.goods-buy", json, "");
      if (result) {
        this.craeteOrder(item);
      } else {
        this.isClick = true;
        this.$toast(msg);
      }
    },
    // 创建订单
    async craeteOrder(item) {
      let json = {
        new_auction_price: this.priceVal
      };
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.create", json, "");
      if (result) {
        console.log(data);
        this.getMergaPay(data.order_ids, item);
      } else {
        this.isClick = true;
        this.$toast(msg);
      }
    },
    getMergaPay(ids, btn) {
      $http
        .get("order.merge-pay", { order_ids: ids }, "加载中")
        .then(response => {
          if (response.result === 1) {
            this.order_pay_id = response.data.order_pay.id;
            this.uid = response.data.order_pay.uid;
            this.confirm(btn);
            setTimeout(() => {
              this.isClick = true;
            }, 1000);
          } else {
            this.isClick = true;
            this.$dialog.alert({ message: response.msg });
          }
        })
        .catch(error => {
          this.isClick = true;
        });
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.money.memberInfo", {}, "");
      if (result) {
        this.money = data.money;
      } else {
        this.$toast(msg);
      }
    },
    async get_paymentList() {
      let json = {
        new_auction_price: this.priceVal > 0 ? this.priceVal : "0.01"
      };
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.goods-buy.paymentList", json, "");
      console.log(data);
      if (result) {
        this.paymentList = data;
      } else {
        this.$toast(msg);
      }
    }
  },
  computed: {
    btnclass(type) {
      return function(type) {
        if (type == 1 || type == 6 || type == 9 || type == 12 || type == 20 || type == 22) {
          return "icon-balance_i";
        } else if (type == 2 || type == 10) {
          return "icon-balance_j";
        } else if (type == 18) {
          return "icon-balance_d";
        } else if (type == 19) {
          return "icon-balance_g";
        } else if (type == 140) {
          return "icon-guizhouyinhangjuhezhifu";
        } else if (type == 50) {
          return "icon-balance_i";
        } else {
          return "icon-balance_h";
        }
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.account_management_top {
  height: 9.03rem;
  background: linear-gradient(180deg, #f15353 0%, #f5f5f5 100%);
}
.rechargeList {
  background: #ffffff;
  border-radius: 0.5rem;
  margin: 0 0.75rem;
  margin-top: 0.63rem;
  box-sizing: border-box;
  padding-bottom: 1.8rem;
  .lis {
    margin-left: 0.84rem;
    .rachageLis {
      display: flex;
      align-items: center;
      font-size: 0.81rem;
      .iconfont {
        font-size: 2rem;
        margin-right: 0.75rem;
      }
      .icon-balance_d {
        color: #00908c;
      }

      .icon-balance_e {
        color: #64b42e;
      }

      .icon-balance_f {
        color: #fac337;
      }

      .icon-balance_g {
        color: #00508e;
      }

      .icon-balance_h {
        color: #fac337;
      }

      .icon-balance_i {
        color: #64b42e;
      }

      .icon-balance_j {
        color: #069ce7;
      }
      .icon-balance_a_n1 {
        color: #64b42e;
      }
    }
  }
  .txt {
    font-size: 0.81rem;
    color: #f15353;
    text-align: left;
    padding: 0.94rem 0.75rem;
    position: relative;
  }
  .txt::after {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    width: 0.09rem;
    height: 0.81rem;
    background: #f15353;
  }
}
.detail {
  background: #ffffff;
  border-radius: 0.63rem;
  margin: 0 0.75rem;
  margin-top: -7.84rem;
  padding: 1rem 0.75rem;
  .account_txt {
    text-align: left;
    font-size: 0.81rem;
    color: #00001c;
  }
  .tips {
    margin-top: 1rem;
    text-align: left;
    font-size: 0.81rem;
    color: #6e6e79;
  }
  .numInpBox {
    display: flex;
    align-items: center;
    padding: 1.4rem 0;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f1;
    .van-cell {
      padding: 0;
    }
    .small {
      font-weight: bold;
      font-size: 0.94rem;
      margin-right: 0.5rem;
    }
  }
}
</style>
